<template>
    <view class="login-container">
        <image src="@/static/img/logo.png" class="logo"></image>
        <view class="login-body-container">
            <text class="welcome">欢迎使用\n东兴边贸二级市场</text>
            <mobile-input v-model:mobile="mobile"></mobile-input>
            <divider></divider>
            <password-input v-model:password="password"></password-input>
            <divider></divider>
            <sms-code-input v-model:smsCode="smsCode"></sms-code-input>
            <divider></divider>
            <button>登录</button>
            <view class="operation-container">
                <text @click="register">注册账号</text>
                <text @click="forgetPassword">忘记密码</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import MobileInput from '@/components/MobileInput.vue';
import PasswordInput from '@/components/PasswordInput.vue';
import SmsCodeInput from '@/components/SmsCodeInput.vue';
import Divider from '@/components/Divider.vue';
const mobile = ref('');
const password = ref('');
const smsCode = ref('');
const userType = ref('');
onLoad((options) => {
    userType.value = options.userType;
});
function register() {
    uni.navigateTo({
        url: '/pages/login/registerStep1'
    });
}
function forgetPassword() {
    uni.navigateTo({
        url: '/pages/login/forgetPassword'
    });
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.login-container {
    @extend .column-container-layout;
    background-image: url('@/static/img/login/background.png');
    background-size: 100% 100%;
    align-items: center;
    justify-content: center;
    .logo {
        position: absolute;
        right: 10%;
        top: 10%;
        width: $scale * 80rpx;
        height: $scale * 114rpx;
    }
    .login-body-container {
        @extend .column-layout;
        padding: $scale * 20rpx;
        margin-top: $scale * 100rpx;
        .welcome {
            font-size: $scale * 30rpx;
            margin-bottom: $scale * 20px;
            color: #002c8c;
        }
        button {
            color: white;
            background-color: #437eff;
            border-radius: $scale * 8rpx;
            width: auto;
            font-size: $scale * 18rpx;
            margin: $scale * 30rpx 0;
        }
        .operation-container {
            @extend .row-layout;
            justify-content: space-between;
            width: auto;
            margin: 0 $scale * 10rpx;
            text {
                color: #1a1a1a;
                font-size: $scale * 18rpx;
            }
        }
    }
}
</style>
